<template>
  <div>
    <el-tag>粘盒</el-tag>
    <el-checkbox @change="clickToChange()">需要</el-checkbox>
    <br/>
    <span>种类：</span>
    <el-select v-model="zhanhe.zhong_lei" :disabled="disable" @change="getOther()"
               placeholder="请选择" class="length" size="small">
      <el-option v-for="(item) in option.zhong_lei" :key="item" :label="item" :value="item"></el-option>
    </el-select>
    <span>粘费(元/只)：</span>
    <el-select v-model="zhanhe.zhanfei" :disabled="disable"
               placeholder="请选择" class="length" size="small">
      <el-option v-for="(item) in option.zhan_fei" :key="item" :label="item" :value="item"></el-option>
    </el-select>
    <input v-model.lazy="zhanhe.zhanfei" placeholder="请输入粘费" class="length"
           v-if="zhanhe.zhanfei ==='自填'"></input>
    <br/>
    <span>开机费：</span>
    <el-select v-model="zhanhe.kai_ji_fei" :disabled="disable"
               placeholder="请选择" class="length" size="small">
      <el-option v-for="(item) in option.kai_ji_fei" :key="item" :label="item" :value="item"></el-option>
    </el-select>
    <br/>
    <el-tag type="warning" class="cost">成本: {{computeCost()}}</el-tag>
  </div>
</template>

<script>
export default {
  props: ['Q', 'x', 'y', 'm', 'confirm'],
  name: 'Zhanhe',
  data () {
    return {
      disable: true,
      option: {
        zhong_lei: ['纸卡-单边盒子', '纸卡-双边盒', '纸卡-盒中盒', '纸卡-勾底盒', '坑-单边盒', '坑-双拼盒'],
        zhan_fei: [0.008, 0.025, 0.05, 0.08, 0.15, '自填'],
        kai_ji_fei: [80, 250, 500, 300, '自填']
      },
      zhanhe: {
        zhong_lei: '',
        zhanfei: 0,
        kai_ji_fei: '',
        pin_ban_shu: ''
      }
    }
  },
  methods: {
    computeCost () {
      let q = parseInt(this.Q)
      let p = this.zhanhe.zhanfei
      let pinban = parseInt(this.m)
      let kaiji = parseInt(this.zhanhe.kai_ji_fei)
      console.log(q, p, pinban, kaiji)
      let cost = p * pinban * q
      cost = cost <= kaiji ? kaiji : cost
      return cost <= kaiji ? `${kaiji}` : `${p} × ${pinban} × ${q} = ${cost}`
    },
    clickToFin () {
      if (!this.disable) this.$emit('transferToFather', 'zhanhe', this.zhanhe)
    },
    clickToChange () {
      this.disable = !this.disable
    },
    getOther () {
      let zhanFei = [0.008, 0.025, 0.025, 0.05, 0.08, 0.15]
      let kaiJiFei = [80, 250, 250, 500, 300, 300]
      let i = this.option.zhong_lei.indexOf(this.zhanhe.zhong_lei)
      this.zhanhe.zhanfei = zhanFei[i]
      this.zhanhe.kai_ji_fei = kaiJiFei[i]
    }
  },
  watch: {
    confirm (nV, oV) {
      if (nV !== oV) this.clickToFin()
    }
  }
}
</script>

<style scoped>
.length{
  width: 150px;
}
.el-select{
  margin-top: 10px;
  margin-right: 10px;
}

.el-input{
  margin-top: 10px;
}

.cost{
  margin-top: 10px;
}
</style>
